<template lang="html">
    <div class="homeTemp">

        <p class="head">今日特卖·每日9点更新</p>

        <div class="" v-for="item in allData">
            <router-link :to="'/sort/'+item.id">
                <img :src="item.imgUrl" alt="">
                <p>
                    <span v-text="item.title"></span>
                    <b v-if="item.status == '1'">今日上新</b>
                </p>
                <span v-if="item.status == '0'"  v-text="'剩余'+ Math.floor((item.endTime - item.startTime)/86400) + '天'"></span>
            </router-link>
        </div>

        <div class="info">
            <p>每天早9点更新，记得来看呀</p>
            <div>
                <p>北京醋溜网络科技股份有限公司</p>
                <p>客服电话 010-56024702</p>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            allData: []
        }
    },
    created () {
        this.$http.get('../../../static/home/index-boy.json').then( data => {
            // console.log(data.data.data.groupList[2].dataList);
            // 把请求下来的数据转移给实例的data函数中
            this.allData = data.data.data.groupList[2].dataList;
        }, err => {
            console.log(err);
        });

        this.$http.get('../../../static//home/index-boy2.json').then( data => {
            // console.log(data.data.data.groupList[0].dataList);
            var result = data.data.data.groupList[0].dataList;
            // 把请求下来的数据转移给实例的data函数中
            for (var i = 0; i< result.length; i++) {
                this.allData.push(result[i]);
            }
        }, err => {
            console.log(err);
        });
    }
}
</script>

<style lang="css" scoped>
    .homeTemp .head{
        height: 1.5rem;
        padding: 5px 10px 5px 38px;
        line-height: 18px;
        font-size: 1.33rem;
        color: #f99;
        background: url(./images/date.png) 10px center / 18px 18px no-repeat;
        background-color: #F7F7F7;
        border-bottom: solid 1px #F7F7F7;
    }
    .homeTemp div{
        width: 25rem;
        padding: .83rem .83rem .83rem .83rem;
        border-bottom: 1px solid #f7f7f7;
    }
    .homeTemp a{
        display: block;
        width: 25rem;
        margin: auto auto;
    }
    .homeTemp a img{
        width: 100%;
    }
    .homeTemp a p{
        height: 1.67rem;
        margin-top: .67rem;
    }
    .homeTemp a p span{
        float: left;
        width: 20rem;
        height: 1.67rem;
        line-height: 20px;
        display: block;
        font-size: 1.17rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #444;
    }
    .homeTemp a p b{
        float: left;
        font-size: 1.17rem;
        color: #df3130;
    }
    .homeTemp a > span{
        display: block;
        color: #1400F8;
    }
    .homeTemp .info{
        width: 100%;
        height: 5.17rem;
        font-size: 13px;
        padding: 10px 0 54px;
        background: #F7F7F7;
        text-align: center;
        color: #999;
    }
    .homeTemp .info > p{
        width: 100%;
        height: 19px;
        margin-bottom: 5px;
        line-height: 1.5rem;
    }
    .homeTemp .info div{
        width: 100%;
        height: 38px;
        padding: 0;
        line-height: 1.5rem;
    }
</style>
